<template>
	<scroller no-data-text="暂无更多相关院校" style="margin-top: 1.1rem;" :on-infinite="handleReachButton" refresh-layer-color="@mainColor" loading-layer-color="@mainColor">
		<svg class="spinner" style="stroke:@mainColor;" slot="refresh-spinner" viewBox="0 0 64 64">
			<g stroke-width="7" stroke-linecap="round">
				<line x1="10" x2="10" y1="27.3836" y2="36.4931">
					<animate attributeName="y1" dur="750ms" values="16;18;28;18;16;16" repeatCount="indefinite"></animate>
					<animate attributeName="y2" dur="750ms" values="48;46;36;44;48;48" repeatCount="indefinite"></animate>
					<animate attributeName="stroke-opacity" dur="750ms" values="1;.4;.5;.8;1;1" repeatCount="indefinite"></animate>
				</line>
				<line x1="24" x2="24" y1="18.6164" y2="45.3836">
					<animate attributeName="y1" dur="750ms" values="16;16;18;28;18;16" repeatCount="indefinite"></animate>
					<animate attributeName="y2" dur="750ms" values="48;48;46;36;44;48" repeatCount="indefinite"></animate>
					<animate attributeName="stroke-opacity" dur="750ms" values="1;1;.4;.5;.8;1" repeatCount="indefinite"></animate>
				</line>
				<line x1="38" x2="38" y1="16.1233" y2="47.8767">
					<animate attributeName="y1" dur="750ms" values="18;16;16;18;28;18" repeatCount="indefinite"></animate>
					<animate attributeName="y2" dur="750ms" values="44;48;48;46;36;44" repeatCount="indefinite"></animate>
					<animate attributeName="stroke-opacity" dur="750ms" values=".8;1;1;.4;.5;.8" repeatCount="indefinite"></animate>
				</line>
				<line x1="52" x2="52" y1="16" y2="48">
					<animate attributeName="y1" dur="750ms" values="28;18;16;16;18;28" repeatCount="indefinite"></animate>
					<animate attributeName="y2" dur="750ms" values="36;44;48;48;46;36" repeatCount="indefinite"></animate>
					<animate attributeName="stroke-opacity" dur="750ms" values=".5;.8;1;1;.4;.5" repeatCount="indefinite"></animate>
				</line>
			</g>
		</svg>
		<div class='aboutSchool'>
			<div class="pathAcademyList">
				<div class="pathAcademyItem" v-for="(item, index) of pathAcademyList" :key="index" @click="gotos(item, index)">
					<div class="topArea">
						<div class="iconAndName">
							<img :src="item.icon" alt="">
							<div>{{ item.academyName }}</div>
						</div>
						<!-- <div class="isAttention">+ 关注</div> -->
						<div :class="['isAttention', item.followStatus == 0 ? 'hasActionAttention' : '']" @click.stop="getAttention(item)">{{ item.followStatus == 0 ? '已关注' : '+ 关注'}}</div>
					</div>
					<div class="intro">{{ item.feature }}</div>
					<div class="dataByYear">
						<div class="dataMsg" v-show="isZhejiang==false"> 
							2018年录取线&nbsp;&nbsp;文科 <span>{{ item.arts || '暂无' }}</span> 理科 <span>{{ item.science || '暂无' }}</span> 
						</div>
						<div class="dataMsg" v-show="isZhejiang==true" style="width:3.2rem">  
							2018年录取线&nbsp;&nbsp; <span>{{item.enroll==0?'暂无':item.enroll}}</span> 
						</div>
					</div>
				</div>
			</div>
			<div style="width: 100%;height: 0.5rem;"></div>
		</div>
	</scroller>
</template>

<script>
	import { followUser, queryPathAcademyById } from "~/api/identity";
	import ls from 'store2';
	export default {
		name: 'RelativeSchool',
		props: {
			conditionId: Number,
			dataSourse: Object
		},
		data() {
			return {
				isZhejiang: false,
				currentPage: 1,
				totalPages: 1,

				pathAcademyList: [],
				params: {
					pageNo: 1,
					pageSize: 10,
					pathId: null,
					province: null,
					fromUserId: ls.get('yxkData').userId
				},
				listData: [],
				onFetching: false
			}
		},
		mounted() {
			if (ls.get("userArea")=="浙江") {
				this.isZhejiang = true
			}
            this.params.province = ls.get('userArea')
            this.params.fromUserId = ls.get('yxkData').userId
			this.params.pathId = this.conditionId;

			this.getPathAcademyById()
		},
		methods: {
			getPathAcademyById() {
				this.$loading('open');
				queryPathAcademyById(this.params).then(res => {
					this.pathAcademyList = res.data.list;
					this.totalPages =Math.ceil((res.data.total)/(this.params.pageSize));
				}).finally(() => {
					this.$hideLoading()
				})
			},
			gotos(datas, index) {
				this.$store.commit('changeFollowIndex', index)
				ls.set('pathDetail', this.dataSourse)
				// if (datas.image === '') {
				// 	this.goto('../yxk/univDetail?academyCode='+datas.academyCode)
				// } else {
					this.goto('../yxk/academyDetail?academyCode='+datas.academyCode+'&gobackwx=true')
				// }
			},
			goto(routerName) {
				this.$router.push({
					path: routerName				
				});
      		},
      // 关注与取消关注
      getAttention(item) {
        this.$loading('open');
        let statusAction = 0; // 1:关注   0:取消关注
        if (item.followStatus == 0) {
          item.followStatus = 1; // 未关注
          statusAction = 0;
        } else {
          item.followStatus = 0; // 已关注
          statusAction = 1
        }
        followUser({
          action: statusAction,
          fromUserId: ls.get('yxkData').userId,
          academyCode: item.academyCode
        }).then(() => {
        }).catch(error => {
          this.$vux.toast.text('网络故障，请稍后重试~');
        }).finally(() => {
          this.$hideLoading();
        })
      },
      handleReachButton(done) {
        if (this.currentPage < this.totalPages) {
          this.currentPage = this.currentPage + 1;
          this.params.pageNo = this.currentPage
          queryPathAcademyById(this.params).then(res => {
            this.pathAcademyList = this.pathAcademyList.concat(res.data.list);
            this.totalPages =Math.ceil((res.data.total)/(this.params.pageSize));
            done();

          }).finally(() => {
            this.$hideLoading()
          })
        } else {
          done(true);
          return;
        }
      }
		}
	}
</script>

<style lang="less" scoped>
	.aboutSchool {
		padding: 0.3rem 0.32rem;

		.pathAcademyList {
			.pathAcademyItem {
				width: 100%;
				height: 3.01rem;
				background: #fff;
				border-radius: 0.1rem;
				margin-bottom: 0.3rem;
				padding-top: 0.3rem;
				padding-left: 0.28rem;

				.topArea {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-right: 0.29rem;
					margin-bottom: 0.2rem;

					.iconAndName {
						display: flex;
						justify-content: flex-start;
						align-items: center;

						img {
							width: 0.6rem;
							height: 0.6rem;
							margin-right: 0.3rem;
						}

						div {
							font-size: 0.34rem;
							color: #222;
							font-weight: bold;
							max-width: 4rem;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
							-webkit-box-orient: vertical;
						}
					}

					.isAttention {
						width: 1.29rem;
						height: 0.58rem;
						line-height: 0.58rem;
						text-align: center;
						border: 1px solid @mainColor;
						border-radius: 0.3rem;
						color: @mainColor;
						font-size: 0.26rem;
					}

					.hasActionAttention {
						color: #C7C7C7;
						background: #F7F7FA;
						border-color: transparent;
					}
				}

				.intro {
					color: #999;
					font-size: 0.26rem;
					padding-right: 0.28rem;
					width: 100%;
					height: 0.7rem;
					line-height: 0.37rem;
					margin-bottom: 0.3rem;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					-webkit-box-orient: vertical;
				}

				.dataByYear {
					width: 100%;
					display: flex;
					justify-content: flex-end;

					.dataMsg {
						width: 4.7rem;
						height: 0.6rem;
						line-height: 0.6rem;
						background: #F7F7FA;
						text-align: center;
						border-top-left-radius: 0.3rem;
						border-bottom-left-radius: 0.3rem;
						color: #222;
						font-size: 0.26rem;

						span {
							color: @mainColor;
						}
					}
				}
			}
		}
	}

	.pull-to-refresh-layer {
		margin-top: 0;
	}
</style>
